<template>
  <div class="semifinals">
    <ul class="semifinals_one">
      <li class="first">1/4决赛</li>
      <li class="nor">
        <div class="vslist">
          <keep-alive>
            <team-group :key="0 + keyValue" :keyLength="0 + keyValue" :total="total" @valueChange="setTableList"></team-group>
          </keep-alive>
        </div>
      </li>
      <li class="nor">
        <div class="vslist">
          <keep-alive>
            <team-group :key="1 + keyValue" :keyLength="1 + keyValue" :total="total" @valueChange="setTableList"></team-group>
          </keep-alive>
        </div>
      </li>
    </ul>
    <ul class="semifinals_two">
      <li class="first">半决赛</li>
      <li class="nor"></li>
    </ul>
    <ul class="semifinals_middle">
      <li class="first">决赛<br><span>冠军姓名</span></li>
      <ul>
        <li class="nor"></li>
      </ul>
    </ul>
    <ul class="semifinals_two">
      <li class="first">半决赛</li>
      <li class="nor"></li>
    </ul>
    <ul class="semifinals_one">
      <li class="first">1/4决赛</li>
      <li class="nor">
        <div class="vslist">
          <keep-alive>
            <team-group :key="2 + keyValue" :keyLength="2 + keyValue" :total="total" @valueChange="setTableList"></team-group>
          </keep-alive>
        </div>
      </li>
      <li class="nor">
        <div class="vslist">
          <keep-alive>
            <team-group :key="3 + keyValue" :keyLength="3 + keyValue" :total="total" @valueChange="setTableList"></team-group>
          </keep-alive>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import TeamGroup from './TeamGroup'
export default {
  components: {
    TeamGroup
  },
  props: {
    total: {
      type: Number,
      default: 8
    },
    currentTab: {
      type: Number,
      default: 1
    }
  },
  computed: {
    ...mapGetters({
      race_weedour_teamlist: 'race_weedour_teamlist',
      race_weedout_vslist: 'race_weedout_vslist'
    }),
    keyValue: function () {
      return (this.currentTab - 1) * 4
    }
  },
  data () {
    return {
      valueList: new Array(this.total / 2).fill({ // 对阵初始数据
        guestUserId: '',
        hostUserId: ''
      })
    }
  },
  methods: {
    setTableList (val, keyLength) { // 更新对阵数据
      this.$set(this.valueList, keyLength, val)
      this.$store.commit('RACE_WEEDOUT_VSLIST', this.valueList)
    }
  }
}
</script>
<style lang="scss" scoped>
.semifinals{
  font-size: 12px;
  display: inline-table;
  li.first{
    text-align: center;
  }
  span.leab{
    display: inline-block;
    height:18px;
    line-height:18px;
    padding: 0 5px;
    border-radius: 4px;
    margin-right:5px;
    color:#fff;
    background: #ff8b2f;
  }
  .vslist{
    width:90%;
    padding: 0 5%;
    position: absolute;
    margin: auto;
    top: 50%; left: 50%;  
    -webkit-transform: translate(-50%,-50%);  
    -ms-transform: translate(-50%,-50%);  
    transform: translate(-50%,-50%); 
  }
  .vs_text{
    text-indent: 30px;
  }
  .score-btn{
    position: absolute;
    right:8px;
    top:50%;
    margin-top:-15px;
  }
  ul{
    float:left;
  }
  .semifinals_one{
    width:160px;
    li{
      border:1px solid #ebebeb;
      margin-top: -1px;
    }
    li.first{
      height:40px;
      line-height: 40px;
    }
    li.nor{
      height:239px;
      position: relative;
       .vs_text{
        margin: 20px 0;
      }
    }
  }
  .semifinals_two{
    width:160px;
    li{
      border:1px solid #ebebeb;
      margin: -1px;
    }
    li.first{
      height:40px;
      line-height: 40px;
    }
    li.nor{
      height:477px;
      position: relative;
      .vs_text{
        margin: 50px 0;
      }
    }
  }
  .semifinals_middle{
    width:192px;
    li.first{
      height:65px;
      border-top:1px solid #ebebeb;
      border-bottom:1px solid #ebebeb;
      margin-top: -1px;
      line-height: 1.6;
      padding-top: 10px;
      span{
        color: #666;
      }
    }
    li.nor{
      height:451px;
      width:192px;
      border-bottom:1px solid #ebebeb;
      position: relative;
      .vs_text{
        margin: 80px 0;
      }
    }
  }
}
</style>
